Kattava opas CSS @scroll-timeline -ominaisuuteen, joka kattaa sen syntaksin, ominaisuudet, käytön ja edistyneet animaatiotekniikat. Opi luomaan mukaansatempaavia vierityksen avulla ohjattuja animaatioita nykyaikaisiin verkkokokemuksiin.
CSS @scroll-timeline hallinta: Animaatioiden ohjaus vierityksen edistymisen avulla
Web-kehityksen jatkuvasti kehittyvässä maisemassa mukaansatempaavien ja interaktiivisten käyttökokemusten luominen on ensiarvoisen tärkeää. CSS tarjoaa erilaisia työkaluja tämän saavuttamiseksi, ja yksi tehokkaimmista, mutta usein unohdetuista, on @scroll-timeline at-rule. Tämän ominaisuuden avulla kehittäjät voivat sitoa animaatioita suoraan elementin vierityksen edistymiseen, luoden kiehtovia vierityksen ohjaamia animaatioita. Tämä artikkeli tarjoaa kattavan tutustumisen @scroll-timeline -ominaisuuteen, kattaen sen syntaksin, ominaisuudet, käytännön käytön ja edistyneet animaatiotekniikat web-suunnittelusi parantamiseksi.
Mikä on CSS @scroll-timeline?
@scroll-timeline on CSS at-rule, joka määrittää vierityksen aikajanan, joka on pohjimmiltaan sarja tiloja, jotka vastaavat määritetyn elementin vierityspaikkaa. Sen sijaan, että luotettaisiin perinteisiin aikaan perustuviin animaatioihin, @scroll-timeline yhdistää animaation edistymisen käyttäjän vieritystoimintaan. Tämä johtaa luonnollisempaan ja responsiivisempaan animaatioon, koska animaation nopeutta ohjaa suoraan käyttäjän vierityskäyttäytyminen.
Tämä avaa jännittäviä mahdollisuuksia:
- Visuaalinen tarinankerronta: Paljasta sisältöä asteittain käyttäjän vierittäessä.
- Interaktiivinen datan visualisointi: Animoi kaavioita ja graafeja käyttäjän tutkiessa dataa.
- Parallax-efektit: Luo syvyyttä ja ulottuvuutta animoimalla eri elementtejä eri nopeuksilla vieritysposition perusteella.
- Edistymisen ilmaisimet: Visuaalisesti edustavat käyttäjän edistymistä pitkässä dokumentissa.
Syntaksi ja ominaisuudet
@scroll-timeline at-rule:n perussyntaksi on seuraava:
@scroll-timeline aikajana-nimi {
source: auto | <elementin-valitsin>;
orientation: auto | block | inline;
scroll-offsets: <vierityksen-offset>[ , <vierityksen-offset> ]*;
}
Puretaan jokainen ominaisuus osiin:
timeline-name
Tämä on vierityksen aikajanasi yksilöllinen tunniste. Käytät tätä nimeä viittaamaan aikajanaan, kun käytät sitä animaatioon.
Esimerkki:
@scroll-timeline minun-vieritys-aikajana {
/* ... */
}
source
Tämä ominaisuus määrittää elementin, jonka vierityspaikka ohjaa animaatiota. Sillä voi olla kaksi arvoa:
auto: Selain määrittää vieritettävän elementin automaattisesti. Tämä on usein dokumentin näkymäportti (selainikkuna).<elementin-valitsin>: CSS-valitsin, joka tunnistaa tietyn elementin, jota käytetään vierityslähteenä. Tämän avulla voit kohdistaa tiettyjä säiliöitä tai osioita sivullasi.
Esimerkki (käyttäen näkymäporttia lähteenä):
@scroll-timeline minun-vieritys-aikajana {
source: auto; /* Käyttää näkymäporttia */
/* ... */
}
Esimerkki (käyttäen tiettyä elementtiä lähteenä):
@scroll-timeline minun-vieritys-aikajana {
source: #vieritettava-säiliö; /* Käyttää elementtiä, jonka ID on "vieritettava-säiliö" */
/* ... */
}
orientation
Tämä ominaisuus määrittää vierityssuunnan, jota käytetään aikajanalle. Se määrittää, ohjaako animaatiota pysty- vai vaakavieritys. Sillä voi olla kolme arvoa:
auto: Selain määrittää vierityssuunnan automaattisesti lähdeelementin hallitsevan vierityssuunnan perusteella.block: Käyttää lohkon (pystysuuntainen useimmissa kirjoitustiloissa) vierityssuuntaa.inline: Käyttää rivin (vaakasuuntainen useimmissa kirjoitustiloissa) vierityssuuntaa.
Esimerkki (käyttäen pystysuuntaista vieritystä):
@scroll-timeline minun-vieritys-aikajana {
source: auto;
orientation: block; /* Pystysuuntainen vieritys */
/* ... */
}
Esimerkki (käyttäen vaakasuuntaista vieritystä):
@scroll-timeline minun-vieritys-aikajana {
source: #vaakavieritys-säiliö;
orientation: inline; /* Vaakasuuntainen vieritys */
/* ... */
}
scroll-offsets
Tämä ominaisuus määrittää vierityspaikat, jotka vastaavat animaation tiettyjä kohtia. Se on valinnainen ominaisuus, ja jos sitä ei määritetä, animaatio toistetaan vieritettävän alueen alusta loppuun. Käytettäessä voit määrittää yhden tai useamman vierityksen offsetin, joista jokainen määrittää vieritysposition ja vastaavan kohdan animaation edistymisessä.
<vierityksen-offset> -ominaisuuden syntaksi on:
<vierityksen-offset> = <pituus-prosentti> [ at <pituus-prosentti> ]
Missä:
- Ensimmäinen
<pituus-prosentti>edustaa vieritysposition vieritettävällä alueella. - Valinnainen
at <pituus-prosentti>edustaa vastaavaa animaation edistymistä (0 % - 100 %). Jos jätetään pois, animaation edistyminen jakautuu tasaisesti määritettyjen vierityksen offsettien välillä.
Esimerkit:
/* Vierityspaikka 200 pikseliä vastaa animaation edistymistä 0 % */
scroll-offsets: 200px at 0%;
/* Vierityspaikka 50 % vieritettävästä alueesta vastaa animaation edistymistä 50 % */
scroll-offsets: 50% at 50%;
/* Useita offsettejä: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;
/* Ilman "at"-avainsanaa - tasaisesti jaettu animaation edistyminen: */
scroll-offsets: 0px, 500px, 1000px; /* Vastaa arvoa 0px at 0%, 500px at 50%, 1000px at 100% */
Tärkeitä huomioita scroll-offsets -ominaisuudelle:
- Jos määrität
scroll-offsets-ominaisuuden, varmista, että ne kattavat vieritettävän alueen, jotta vältät odottamattoman animaatiokäyttäytymisen. - Animaation edistyminen interpoloidaan määritettyjen vierityksen offsettien välillä.
- Jos et määritä
scroll-offsets-ominaisuutta, animaation edistyminen jakautuu tasaisesti koko vieritettävälle alueelle.
Vierityksen aikajanan käyttäminen animaatioon
Kun olet määrittänyt vierityksen aikajanasi, sinun on sovellettava sitä CSS-animaatioon animation-timeline -ominaisuuden avulla.
Syntaksi on yksinkertainen:
animation-timeline: aikajana-nimi; /* Käytä nimeä, jonka määrittelit @scroll-timeline -kohdassa */
Sinun on myös määritettävä vakio CSS-animaatio käyttämällä @keyframes -ominaisuutta. Animaatio määrittää CSS-ominaisuuksien muutokset, jotka tapahtuvat käyttäjän vierittäessä. Lisäksi kannattaa varmistaa, että `animation-range` CSS-ominaisuus on asetettu. Se määrittää vierityksen aikajanan alueen, joka aktivoi animaation.
Tässä on täydellinen esimerkki:
/* Määritä vierityksen aikajana */
@scroll-timeline minun-vieritys-aikajana {
source: auto;
orientation: block;
}
/* Määritä animaatio */
@keyframes haalistus-sisään {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Käytä animaatiota ja vierityksen aikajanaa elementtiin */
.animoitu-elementti {
animation: haalistus-sisään 1s forwards;
animation-timeline: minun-vieritys-aikajana;
animation-range: entry 25% cover 75%; /* entry ja cover ovat avainsana-arvoja alku- ja loppualueille */
}
Tässä esimerkissä:
@scroll-timelinenimeltäminun-vieritys-aikajanaon määritetty käyttäen näkymäporttia lähteenä ja pystysuuntaista vieritystä suuntana.@keyframesnimeltähaalistus-sisäänmäärittää yksinkertaisen haalistus-sisään ja liu'uta-ylös animaation..animoitu-elementti-luokkaan on sovellettuhaalistus-sisään-animaatio, mutta ajastimen käynnistämisen sijaan sitä ohjaaminun-vieritys-aikajana.- Animation-range määrittää, että animaation tulisi alkaa, kun elementin yläreuna saapuu näkymäportin alareunaan 25 % ja päättyä, kun se poistuu yläreunasta 25 %.
Käytännön esimerkkejä ja käyttötapauksia
Tarkastellaan joitain käytännön esimerkkejä siitä, miten voit käyttää@scroll-timeline -ominaisuutta mukaansatempaavien verkkokokemusten luomiseen.
1. Sisällön asteittainen paljastaminen
Tämä on yleinen käyttötapaus, jossa paljastat sisältöä, kun käyttäjä vierittää sivua alaspäin. Kuvittele pitkä artikkeli, jonka osiot haalistuvat sisään, kun ne tulevat näkyviin.HTML:
<section class="sisältö-osio">
<h2>Osio 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>
<section class="sisältö-osio">
<h2>Osio 2</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>
CSS:
@scroll-timeline paljasta-aikajana {
source: auto;
orientation: block;
}
@keyframes paljasta {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.sisältö-osio {
animation: paljasta 1s forwards;
animation-timeline: paljasta-aikajana;
animation-range: entry 25% cover 75%;
}
.sisältö-osio haalistuu sisään, kun se vierittyy näkymäporttiin. `animation-range` varmistaa, että animaatio alkaa, kun osion yläreuna saapuu näkymäportin alareunaan 25 % ja päättyy, kun osio poistuu yläreunasta 25 %.
2. Parallax-efektit
Parallax-efektit luovat syvyyden tunteen siirtämällä taustaelementtejä eri nopeuksilla kuin etualan elementtejä. @scroll-timeline helpottaa parallax-vierityksen toteuttamista.
HTML:
<div class="parallax-säiliö">
<div class="tausta-elementti"></div>
<div class="etuala-elementti">
<h2>Parallax-osio</h2>
<p>Jonkin verran sisältöä tässä...</p>
</div>
</div>
CSS:
.parallax-säiliö {
position: relative;
height: 500px; /* Säädä tarpeen mukaan */
overflow: hidden;
}
.tausta-elementti {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background.jpg'); /* Korvaa kuvallasi */
background-size: cover;
transform: translateZ(-1px) scale(2); /* Luo parallax-efektin */
transform-origin: top;
pointer-events: none; /* Sallii napsauttamisen etualan elementtejä */
animation: parallax-bg 1s linear forwards;
animation-timeline: parallax-aikajana;
animation-range: 0vh 100vh;
}
.etuala-elementti {
position: relative;
z-index: 1;
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
}
@scroll-timeline parallax-aikajana {
source: auto;
orientation: block;
}
@keyframes parallax-bg {
0% { transform: translateZ(-1px) scale(2) translateY(0px); }
100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}
.tausta-elementti on sijoitettu .etuala-elementti -elementin taakse ja skaalattu ylös käyttämällä transform -ominaisuutta. Sitten käytetään `parallax-bg` -animaatiota, jolloin tausta liikkuu hitaammin kuin etuala käyttäjän vierittäessä, mikä luo parallax-efektin. `animation-range` varmistaa, että animaatio toimii koko näkymäportin korkeuden ajan (0vh - 100vh).
3. Edistymispalkin animointi
Voit käyttää @scroll-timeline -ominaisuutta luodaksesi edistymispalkin, joka visuaalisesti edustaa käyttäjän vierityksen edistymistä dokumentissa.
HTML:
<div class="edistymispalkki-säiliö">
<div class="edistymispalkki"></div>
</div>
<div class="sisältö">
<!-- Sisältösi tässä -->
</div>
CSS:
.edistymispalkki-säiliö {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #eee;
z-index: 1000;
}
.edistymispalkki {
height: 100%;
width: 0%;
background-color: #007bff;
animation: edistymispalkki-täyttö 1s linear forwards;
animation-timeline: document-scroll-timeline;
}
@scroll-timeline document-scroll-timeline {
source: auto;
orientation: block;
}
@keyframes edistymispalkki-täyttö {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.edistymispalkki -ominaisuuden leveys animoidaan 0 %:sta 100 %:iin, kun käyttäjä vierittää dokumentin läpi. @scroll-timeline -ominaisuuden nimi on `document-scroll-timeline`, mikä tekee selväksi, mitä se edustaa.
Edistyneet tekniikat
Kun olet ymmärtänyt perusasiat, voit tutustua joihinkin edistyneisiin tekniikoihin luodaksesi vieläkin kehittyneempiä vierityksen ohjaamia animaatioita.
1. scroll-offsets -ominaisuuden käyttäminen tarkan ohjauksen saavuttamiseksi
scroll-offsets -ominaisuuden avulla voit kartoittaa tietyt vierityspaikat animaation tietyille edistymisarvoille. Tämä on hyödyllistä, kun haluat käynnistää tiettyjä animaatiotiloja tietyissä kohdissa vierityksen aikana.
@scroll-timeline mukautettu-aikajana {
source: #vieritettava-säiliö;
orientation: block;
scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}
@keyframes mukautettu-animaatio {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
.animoitu-elementti {
animation: mukautettu-animaatio 1s forwards;
animation-timeline: mukautettu-aikajana;
}
- Alkaa kohdasta
translateX(-100px)jaopacity: 0, kun vierityspaikka on 100 pikseliä. - Saavuttaa kohdan
translateX(0)jaopacity: 1, kun vierityspaikka on 500 pikseliä. - Päättyy kohtaan
translateX(100px)jaopacity: 0, kun vierityspaikka on 1000 pikseliä.
2. Yhdistäminen JavaScriptiin
Vaikka @scroll-timeline tarjoaa tehokkaan animaatioiden ohjauksen CSS:n kautta, voit yhdistää sen JavaScriptiin saadaksesi entistä suuremman joustavuuden. Voit esimerkiksi käyttää JavaScriptiä seuraaviin toimiin:
- Laskea ja päivittää dynaamisesti
scroll-offsets-ominaisuutta näkymäportin koon tai sisällön muutosten perusteella. - Käynnistää lisää JavaScript-pohjaisia tehosteita tai vuorovaikutuksia vierityksen edistymisen perusteella.
- Toteuttaa vararatkaisuja selaimille, jotka eivät täysin tue
@scroll-timeline-ominaisuutta.
const vieritettavaElementti = document.getElementById('vieritettava-säiliö');
const animoituElementti = document.querySelector('.animoitu-elementti');
vieritettavaElementti.addEventListener('scroll', () => {
const vierityspaikka = vieritettavaElementti.scrollTop;
const maksimiVieritys = vieritettavaElementti.scrollHeight - vieritettavaElementti.clientHeight;
const vierityksenProsenttiosuus = (vierityspaikka / maksimiVieritys) * 100;
animoituElementti.style.setProperty('--vieritys-edistyminen', vierityksenProsenttiosuus + '%');
});
Voit sitten käyttää tätä CSS-muuttujaa animaatiossasi:
@keyframes mukautettu-animaatio {
0% {
transform: translateX(calc(var(--vieritys-edistyminen) * -1px));
}
100% {
transform: translateX(calc(var(--vieritys-edistyminen) * 1px));
}
}
.animoitu-elementti {
--vieritys-edistyminen: 0%; /* Alkuarvo */
animation: mukautettu-animaatio 1s linear forwards;
animation-timeline: vierityksen-ohjaama-aikajana;
}
3. Erilaisten helpotustoimintojen hyödyntäminen
Vaikkaanimation-timing-function ei ole suoraan sovellettavissa itse vierityksen aikajanaan (koska aikajanaa ohjaa vierityksen edistyminen, ei aika), voit silti käyttää helpotustoimintoja @keyframes -ominaisuuksissa ohjataksesi animaation nopeutta ja rytmiä eri vaiheissa. Kokeile erilaisia helpotustoimintoja, kuten ease-in, ease-out, ease-in-out tai jopa mukautettuja kuutiomaisia bezier-käyriä, saavuttaaksesi halutun efektin.
Selaimen yhteensopivuus ja vararatkaisut
Loppuvuodesta 2023 @scroll-timeline -ominaisuudella on suhteellisen hyvä selaimen tuki moderneissa selaimissa, kuten Chrome, Edge, Firefox ja Safari. On kuitenkin tärkeää tarkistaa nykyinen yhteensopivuustila verkkosivustoilla, kuten Can I use..., ennen sen toteuttamista tuotannossa.
Selaimille, jotka eivät tue @scroll-timeline -ominaisuutta, voit tarjota vararatkaisun perinteisten JavaScript-pohjaisten vieritystapahtumakuuntelijoiden ja animaatiokirjastojen, kuten GSAP (GreenSock Animation Platform) tai Anime.js, avulla. Voit myös käyttää CSS-ominaisuuskyselyitä (@supports) soveltaaksesi ehdollisesti joko @scroll-timeline -pohjaisia animaatioita tai JavaScript-pohjaisia vararatkaisuja.
@supports (animation-timeline: scroll()) {
/* Käytä @scroll-timeline-pohjaisia animaatioita */
.animoitu-elementti {
animation: haalistus-sisään 1s forwards;
animation-timeline: minun-vieritys-aikajana;
}
} @else {
/* Käytä JavaScript-pohjaista vararatkaisua */
.animoitu-elementti {
/* Piilota aluksi */
opacity: 0;
}
/* (JavaScript-koodi vierityksen havaitsemiseen ja peittävyyden soveltamiseen) */
}
Esteettömyysnäkökohdat
Kun käytät @scroll-timeline -ominaisuutta tai mitä tahansa animaatiotekniikkaa, on erittäin tärkeää ottaa huomioon esteettömyys. Varmista, että animaatiosi eivät aiheuta:
- Kohtauksia: Vältä vilkkuvia tai nopeasti muuttuvia animaatioita.
- Häiriöitä: Tarjoa käyttäjille tapa keskeyttää tai poistaa animaatiot käytöstä, erityisesti jos ne ovat pitkiä tai häiritseviä.
- Kognitiivista ylikuormitusta: Käytä animaatioita säästeliäästi ja varmista, että niillä on selkeä tarkoitus, sen sijaan, että ne olisivat puhtaasti koristeellisia.
- Matkapahoinvointia: Ole tietoinen parallax-efekteistä, koska ne voivat aiheuttaa matkapahoinvointia joillekin käyttäjille.
Harkitse vaihtoehtoisia tapoja käyttää animaatioiden kautta esitettyjä tietoja, kuten staattista sisältöä tai kuvaavaa tekstiä. Käytä ARIA-attribuutteja tarjotaksesi semanttista merkitystä ja kontekstia avustaville tekniikoille.
Parhaat käytännöt
Tässä on joitain parhaita käytäntöjä, jotka kannattaa pitää mielessä, kun työskentelet@scroll-timeline -ominaisuuden kanssa:
- Käytä kuvaavia aikajanojen nimiä: Valitse aikajanojen nimet, jotka osoittavat selkeästi niiden tarkoituksen (esim.
parallax-tausta-aikajana,paljasta-osio-aikajana). - Pidä animaatiot suorituskykyisinä: Optimoi animaatiosi välttääksesi suorituskyvyn pullonkauloja. Käytä laitteistokiihdytettyjä CSS-ominaisuuksia, kuten
transformjaopacity, aina kun mahdollista. - Testaa perusteellisesti: Testaa animaatiosi eri laitteilla ja selaimilla varmistaaksesi, että ne toimivat odotetusti eivätkä aiheuta esteettömyys- tai suorituskykyongelmia.
- Aloita yksinkertaisesta: Aloita yksinkertaisilla animaatioilla ja lisää asteittain monimutkaisuutta kokemuksesi karttuessa.
- Ota huomioon käyttökokemus: Varmista, että animaatiosi parantavat käyttökokemusta eivätkä heikennä sitä. Vältä liian monimutkaisia tai häiritseviä animaatioita.
- Käytä `animation-range` CSS-ominaisuutta: Varmista, että animaatiot käynnistyvät vain, kun elementti on näkymäportissa sujuvan ja ennustettavan kokemuksen saavuttamiseksi.
Johtopäätös
@scroll-timeline on tehokas CSS-ominaisuus, jonka avulla kehittäjät voivat luoda mukaansatempaavia ja interaktiivisia vierityksen ohjaamia animaatioita. Linkittämällä animaatiot käyttäjän vierityskäyttäytymiseen voit luoda luonnollisempia ja reagoivampia verkkokokemuksia. Ymmärtämällä sen syntaksin, ominaisuudet ja edistyneet tekniikat voit hyödyntää @scroll-timeline -ominaisuutta parantaaksesi web-suunnittelusi ja luodaksesi kiehtovia käyttäjämatkoja. Muista ottaa huomioon selaimen yhteensopivuus, esteettömyys ja suorituskyky, kun otat käyttöön @scroll-timeline -ominaisuutta, ja aseta käyttökokemus aina etusijalle.